<template>
  <div class="search-bar">
    <div class="location-input">
      <input type="text" v-model="location" placeholder="广州" />
    </div>
    <div class="keyword-input">
      <input type="text" v-model="keyword" placeholder="搜索职位、公司" />
    </div>
    <button class="search-button" @click="search">
      <img src="" alt="搜索" class="search-icon" />
      搜索
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const location = ref('广州')
const keyword = ref('')

const search = () => {
  console.log('Searching:', keyword.value, 'in', location.value)
}
</script>

<style scoped>
.search-bar {
  display: flex;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.location-input,
.keyword-input {
  padding: 10px;
}

.location-input {
  width: 80px;
  border-right: 1px solid #e0e0e0;
}

.keyword-input {
  flex-grow: 1;
}

.location-input input,
.keyword-input input {
  border: none;
  width: 100%;
  font-size: 14px;
}

.search-button {
  background-color: #00b38a;
  color: white;
  border: none;
  padding: 0 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.search-icon {
  margin-right: 5px;
}
</style>
